import { deleteRole, getRolePage } from '@/services/api/api-admin-role';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-table';
import { message, Modal } from 'antd';
import React, { useRef } from 'react';
import AddRole from './components/AddRole';
import EditRole from './components/EditRole';
import { PageContainer } from '@ant-design/pro-layout';

export default (): React.ReactNode => {
  const userRef = useRef<ActionType>();

  const columns: ProColumns<AdminRoleData.Role>[] = [
    {
      title: '名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '描述',
      key: 'describes',
      dataIndex: 'describes',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      valueType: 'select',
      valueEnum: {
        0: { text: '禁用', status: 'Error' },
        1: { text: '启用', status: 'Success' },
      },
    },
    {
      title: '创建时间',
      key: 'createdTime',
      dataIndex: 'createdTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, row, index, action) => [
        <EditRole
          key="edit_role"
          role={row}
          onRefurbish={() => {
            userRef.current?.reset();
          }}
        />,
        <a
          key={'delete'}
          onClick={() => {
            Modal.confirm({
              title: '是否要删除该角色',
              icon: <ExclamationCircleOutlined />,
              okText: '是',
              okType: 'danger',
              cancelText: '否',
              async onOk() {
                const response = await deleteRole({ id: row.id });
                if (response.code === 0) {
                  message.success('提交成功');
                  userRef.current?.reset();
                }
              },
              onCancel() {},
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await getRolePage({
      ...params,
    });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  return (
    <PageContainer
      breadcrumb={{
        items: [],
      }}
    >
      <ProTable<AdminRoleData.Role>
        toolbar={{
          title: '角色列表',
        }}
        columns={columns}
        actionRef={userRef}
        request={request}
        search={false}
        sticky
        rowKey="id"
        tableLayout="fixed"
        dateFormatter="string"
        bordered
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        toolBarRender={() => [
          <AddRole
            key="add_role"
            onRefurbish={() => {
              userRef?.current?.reset();
            }}
          />,
        ]}
      />
    </PageContainer>
  );
};
